<template>
  <div class="echarts_box">
    <div class="echarts_box" ref="echarts_box" :style="{ opacity: data.length == 0 ? '0' : '1' }"></div>
    <!---------------------- 无数据时显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>

<script>
  import fontSize from "@/utils/fontSize";
  // const elementResizeDetectorMaker = require("element-resize-detector");
  export default {
    computed: {
      // ...mapGetters(["echartsColor"]),
    },
    watch: {
      data: "drawLine", // 数值变化是更新图表
      color: "drawLine", // 数值变化是更新图表
      nameTextStyle: "drawLine", // 数值变化是更新图表
      yName: "drawLine", // 数值变化是更新图表
      labelUnit: "drawLine", // 数值变化是更新图表
      extraGrid: "drawLine", // 数值变化是更新图表
    },
    props: {
      extraGrid: {
        type: Object,
        default: () => ({})
      },
      color: {
        type: String,
        default: "rgba(0, 198, 255,",
      },
      yName: {
        // y轴标题
        type: String,
        default: "",
      },
      labelUnit: {
        type: String,
        default: "",
      },
      nameTextStyle: {
        type: Array | Object,
        default: function () {
          return [0, -30, 5, 0];
        },
      },
      data: {
        // 返回的数据
        type: Array | Object,
        default: function () {
          return [];
        },
      },
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        try {
          var cw = document.body.clientWidth;
          this.$nextTick(() => {
            let myChart = this.$echarts.init(this.$refs.echarts_box);
            let xData = [];
            let yData = [];
            for (let item of this.data) {
              xData.push(item.name);
              yData.push(item.value);
            }
            let option = {
              tooltip: {
                confine: true,
                trigger: "axis",
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: "line", // 默认为直线，可选为：'line' | 'shadow'
                },
                backgroundColor: "rgba(0,74,174,0.9)", //设置背景颜色
                textStyle: {
                  color: "rgba(255,255,255,1)", //设置文字颜色
                  // fontFamily: "PingFang SC",
                  fontSize: fontSize.fontSize(18),
                },
              },
              grid: {
                top: "18%",
                left: "3%",
                right: "3%",
                bottom: "0%",
                containLabel: true,
                ...this.extraGrid
              },
              xAxis: [
                {
                  type: "category",
                  axisLine: {
                    lineStyle: {
                      color: "rgba(207,238,252,0.2)",
                    },
                  },
                  axisTick: {
                    //y轴刻度线

                    show: false,
                  },
                  splitLine: { show: false },
                  axisLabel: {
                    color: "rgba(255,255,255,1)",
                    fontSize: fontSize.fontSize(18),
                    // fontFamily: "PingFang SC",
                    // formatter: (name) => {
                    //   return name.length > 5 ? name.slice(0, 5) + "" : name;
                    // },
                  },
                  data: xData,
                },
              ],

              yAxis: [
                {
                  // type: "value",
                  splitNumber: 3,
                  nameTextStyle: {
                    color: "rgba(255,255,255,1)",
                    // fontWeight: 400,
                    fontSize: fontSize.fontSize(18),
                    // padding: [0, 30, -5, 0],
                    padding: this.nameTextStyle,
                    // fontFamily: "PingFang SC",
                  },
                  name: this.yName,
                  // position: "left",
                  axisLabel: {
                    color: "rgba(255,255,255,1)",
                    fontSize: fontSize.fontSize(18),
                    // fontFamily: "PingFang SC",
                  },
                  axisLine: {
                    show: false,
                    lineStyle: {
                      color: "rgba(207,238,252,0.2)",
                    },
                  },
                  axisTick: {
                    //y轴刻度线

                    show: false,
                  },
                  splitLine: {
                    lineStyle: {
                      color: "rgba(126,159,182,0.12)",
                    },
                  },
                },
              ],

              series: [
                {
                  name: "",
                  type: "line",
                  smooth: true, //是否平滑
                  // showAllSymbol: false,
                  splitNumber: 5,
                  symbol: "circle",
                  scale: true,
                  // symbol: 'image://./static/images/guang-circle.png',
                  // symbol: "circle",
                  // symbolSize: 6,
                  // emphasis: {
                  //   itemStyle: {
                  //     borderWidth: 20,
                  //   },
                  // },
                  symbolSize: 8,
                  // 展示曲线上的点
                  showSymbol: true,

                  // 让曲线更加圆滑
                  lineStyle: {
                    normal: {
                      color: this.color + "1)",
                      shadowColor: this.color + " 0)",
                      shadowBlur: 0,
                      // shadowOffsetY: 5,
                      // shadowOffsetX: 5,
                      width: 2, //折线宽度
                    },
                  },
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: this.color + "1)",
                      fontSize: fontSize.fontSize(18),
                    },
                    formatter: (params) => {
                      return params.value+this.labelUnit;
                    },

                  },

                  itemStyle: {
                    color: this.color + "1)",
                  },
                  areaStyle: {
                    //区域填充样式
                    normal: {
                      //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                      color: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: this.color + "0.5)",
                          },
                          {
                            offset: 1,
                            color: this.color + "0)",
                          },
                        ],
                        false
                      ),
                      shadowColor: "rgba(25,163,223,0.5)", //阴影颜色
                      shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    },
                  },
                  data: yData,
                },
              ],
            };
            myChart.setOption(option);
            /* 大小自适应 */
            window.addEventListener("resize", () => {
              // h = this.$refs.echarts_box.offsetHeight;
              // console.log(h);
              myChart.resize();
            });
            myChart.resize();
          });
        } catch (e) {
          console.log(e);
          // 错误处理代码片段
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .echarts_box {
    width: 100%;
    height: 100%;
    position: relative;

    .Nodata {
      position: absolute;
      top: 0;
      z-index: 10;
    }
  }
</style>